﻿@model MobiShop.Models.Order
@using MobiShop.Models
@{
    ViewBag.Title = "Thanh toán";

    string ErrorMessage = ViewBag.ErrorMessage;
    ShoppingBasket basket = (ShoppingBasket)Session["ShoppingBasket"];
    Layout = "~/Views/Shared/_Layout.cshtml";
    bool useCreditCard = ShoppingBasket.useCreditCard;
    Account account = (Account)Session["Account"];

    // các thông tin hiển thị cho các button
    string rdoAddress1 = "checked=\"checked\"";
    string rdoAddress2 = "";
    if (ViewBag.rdoAddress != null && (string)ViewBag.rdoAddress=="2")
    {
        rdoAddress1 = "";
        rdoAddress2 = "checked=\"checked\"";
    }
    string rdoCreditCard1 = "checked=\"checked\"";
    string rdoCreditCard2 = "";
    if (ViewBag.rdoCreditCard != null && (string)ViewBag.rdoCreditCard == "2")
    {
        rdoCreditCard1 = "";
        rdoCreditCard2 = "checked=\"checked\"";
    }
    
    // Các thông tin dùng cho javascript
    DateTime toDay = DateTime.Now;
    int nowMonth = toDay.Month;
    int nowYear = toDay.Year;
    string encoderCCNumber = AccountModels.EncodeCreditCardNumber(account.creditCardNumber);
    string encoderCVV = AccountModels.EncodeCreditCardCVV(account.cardCVV);
    int encoderCardType = 1;
    if(account.cardType != null)
    {
        encoderCardType = (int)account.cardType;
    }
    int encodeCardMonthExpires = nowMonth;
    if(account.cardMonthExpires != null)
    {
        encodeCardMonthExpires = (int)account.cardMonthExpires;
    }
    int encodeCardYearExpires = nowYear;
    if(account.cardYearExpires != null)
    {
        encodeCardYearExpires = (int)account.cardYearExpires;
    }
}

@if (ErrorMessage != null)
{
    @Html.Raw("<fieldset id='fieldsetError' >")
}
else
{
    @Html.Raw("<fieldset id='fieldsetError' style='display:none;' >");
}
<legend>
    <img src="@Url.Content("~/Content/Images/error_button.png")" alt="" width="30px" />
    Xảy ra lỗi:
</legend>
<span id="spanError" style="color:Red;" > 
    @Html.Raw(ErrorMessage)
</span>
@Html.Raw("</fieldset>")

<h2>Thanh toán đơn hàng</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Validate.js")" type="text/javascript"></script>

<div style="color:Green; font-size:22px;">Tổng giá trị đơn hàng : 
<span style="color:Red;">@String.Format("{0:0,0}", basket.TotalPrice) </span>
Vnđ
</div>
<br />
<span>Xin vui lòng nhập đầy đủ thông tin thanh toán theo mẫu dưới đây</span>
<br /><br />

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset> 
<legend>Thông tin người nhận hàng</legend>
    <input type="radio"  id="rdoAddress1" @Html.Raw(rdoAddress1) name="rdoAddress" value="1" /><span id="lblAddress1" >Tôi muốn gửi hàng về địa chỉ của mình</span>
    <input type="radio" id="rdoAddress2" @Html.Raw(rdoAddress2) name="rdoAddress" value="2" /><span id="lblAddress2" >Tôi muốn gửi hàng cho người khác</span>
    <br />
    
        <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td style="width:150px" > 
                @Html.LabelFor(model => model.receiveName)
            </td>
            <td>
                @Html.TextBoxFor(model => model.receiveName, new { @class = "registerTextbox", @maxlength = "200" })
                @Html.ValidationMessageFor(model => model.receiveName, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                 @Html.LabelFor(model => model.receiveAddress)
            </td>
            <td>
                @Html.TextAreaFor(model => model.receiveAddress, new { @rows = "2", @cols = "30" })
                @Html.ValidationMessageFor(model => model.receiveAddress, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.receivePhoneNumber)
            </td>
            <td>
                @Html.TextBoxFor(model => model.receivePhoneNumber, new { @class = "registerTextbox", @maxlength = "15" })
                @Html.ValidationMessageFor(model => model.receivePhoneNumber, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                 @Html.LabelFor(model => model.receiveIdentityCardNumber)
            </td>
            <td>
                @Html.TextBoxFor(model => model.receiveIdentityCardNumber, new { @class = "registerTextbox", @maxlength = "15" })
                @Html.ValidationMessageFor(model => model.receiveIdentityCardNumber, "", new { @class = "error-message" })
            </td>
        </tr>
        @if (!useCreditCard)
        {
            <tr>
                <td > 
               
                </td>
                <td>
                    <input type="submit" value="Thanh toán" name="btnOrder1" id="btnOrder1" />
                </td>
            </tr>
        }
        </table>
</fieldset>
        if (useCreditCard)
        {
<br />
<fieldset>
    <legend>Thông tin thẻ tín dụng</legend>
        <input type="radio" @Html.Raw(rdoCreditCard1) id="rdoCreditCard1" name="rdoCreditCard" value="1" /><span id="lblCreditCard1" >Dùng thẻ tín dụng đã đăng ký trong tài khoản</span>
        <input type="radio" @Html.Raw(rdoCreditCard2) id="rdoCreditCard2" name="rdoCreditCard" value="2" /><span id="lblCreditCard2" >Dùng thẻ tín dụng khác</span>
        <br />
    
        <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td style="width:150px" > 
                @Html.LabelFor(model => model.cardType)
            </td>
            <td>
                @Html.DropDownListFor(model => model.cardType, OrderModels.CardTypeList, new { @style = "width:135px;" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.creditCardNumber)
            </td>
            <td>
                @Html.TextBoxFor(model => model.creditCardNumber, new { @class = "registerTextbox", @maxlength = "20" })
                @Html.ValidationMessageFor(model => model.creditCardNumber, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.cardCVV)
            </td>
            <td>
                @Html.TextBoxFor(model => model.cardCVV, new { @style="width:50px", @maxlength = "4" })
                @Html.ValidationMessageFor(model => model.cardCVV, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                Ngày hết hạn
            </td>
            <td>
                Tháng @Html.DropDownListFor(model => model.cardMonthExpires, OrderModels.MonthList, new { @style = "width:40px;" })
                - năm @Html.DropDownListFor(model => model.cardYearExpires, OrderModels.YearList, new { @style = "width:55px;" })
                <span id="errorMonthYear" class="error-message" style="display:none;" ></span>
            </td>
        </tr>
        <tr>
            <td > 
               
            </td>
            <td>
                <input type="submit" value="Thanh toán" name="btnOrder2" id="btnOrder2" />
            </td>
        </tr>
        </table>
</fieldset>
    <script type="text/javascript">
        var nowMonth__ = parseInt("@nowMonth");
        var nowYear__ = parseInt("@nowYear");
        
        function CheckCCMonthYear() {
            var month = parseInt($("#cardMonthExpires").attr("value"));
            var year = parseInt($("#cardYearExpires").attr("value"));

            var $errorMonthYear = $("#errorMonthYear");
            if (year < nowYear__ || (year == nowYear__ && month < nowMonth__)) {
                $errorMonthYear.html("Ngày hết hạn của thẻ phải lớn hơn ngày hiện hành!");
                $errorMonthYear.show();
                return false;
            } else {
                $errorMonthYear.hide();
                return true;
            }
        }

        function XuatThongTinCreditCard() {
            var $cardType = $("#cardType");
            var $creditCardNumber = $("#creditCardNumber");
            var $cardCVV = $("#cardCVV");
            var $cardMonthExpires = $("#cardMonthExpires");
            var $cardYearExpires = $("#cardYearExpires");

            $cardType.attr("value", "@encoderCardType");
            $creditCardNumber.attr("value", "@encoderCCNumber");
            $cardCVV.attr("value", "@encoderCVV");
            $cardMonthExpires.attr("value", "@encodeCardMonthExpires");
            $cardYearExpires.attr("value", "@encodeCardYearExpires");

            $cardType.attr("disabled", true);
            $creditCardNumber.attr("readonly", true);
            $cardCVV.attr("readonly", true);
            $cardMonthExpires.attr("disabled", true);
            $cardYearExpires.attr("disabled", true);
        }

        function XoaThongTinCreditCard() {
            var $cardType = $("#cardType");
            var $creditCardNumber = $("#creditCardNumber");
            var $cardCVV = $("#cardCVV");
            var $cardMonthExpires = $("#cardMonthExpires");
            var $cardYearExpires = $("#cardYearExpires");

            $cardType.attr("value", "1");
            $creditCardNumber.attr("value", "");
            $cardCVV.attr("value", "");
            $cardMonthExpires.attr("value", "@nowMonth");
            $cardYearExpires.attr("value", "@nowYear");

            $cardType.attr("disabled", false);
            $creditCardNumber.attr("readonly", false);
            $cardCVV.attr("readonly", false);
            $cardMonthExpires.attr("disabled", false);
            $cardYearExpires.attr("disabled", false);
        }

        $(document).ready(function (e) {
            var validate = new Validate();
            validate.ganLabel("lblCreditCard1", "rdoCreditCard1");
            validate.ganLabel("lblCreditCard2", "rdoCreditCard2");

            $("#cardMonthExpires").change(function (e) {
                CheckCCMonthYear();
            });
            $("#cardYearExpires").change(function (e) {
                CheckCCMonthYear();
            });
            $("#btnOrder2").click(function (e) {
                return CheckCCMonthYear();
            });


            $("#rdoCreditCard1").change(function (e) {
                XuatThongTinCreditCard();
            });
            $("#rdoCreditCard2").change(function (e) {
                XoaThongTinCreditCard();
            });
        });
    </script>
    
        if (ViewBag.isFirstRequest != null)
        {
            <script type="text/javascript">
            $(document).ready(function (e) {
                XuatThongTinCreditCard();
            });
            </script>
        }
    }
}



<script type="text/javascript">

    function XuatThongTinNguoiDung() {
        $("#receiveName").attr("value", "@Html.Raw(account.name)");
        $("#receiveAddress").attr("value", "@Html.Raw(account.address)");
        $("#receivePhoneNumber").attr("value", "@account.phoneNumber");
        $("#receiveIdentityCardNumber").attr("value", "");
    }

    function XoaThongTinNguoiDung() {
        $("#receiveName").attr("value", "");
        $("#receiveAddress").attr("value", "");
        $("#receivePhoneNumber").attr("value", "");
        $("#receiveIdentityCardNumber").attr("value", "");
    }


    $(document).ready(function (e) {
        var validate = new Validate();
        validate.ganLabel("lblAddress1", "rdoAddress1");
        validate.ganLabel("lblAddress2", "rdoAddress2");

        $("#rdoAddress1").change(function (e) {
            XuatThongTinNguoiDung();
        });
        $("#rdoAddress2").change(function (e) {
            XoaThongTinNguoiDung();
        });
    });
</script>

@if (ViewBag.isFirstRequest != null)
{
    <script type="text/javascript">
        $(document).ready(function (e) {
            XuatThongTinNguoiDung();
        });
    </script>
}